<template>
  <view class="account-container">
    <view class="page-header">
      <view class="header-left" @click="goBack">
        <u-icon name="arrow-left" size="20" color="#333"></u-icon>
        <text>返回</text>
      </view>
      <view class="header-title">注销账号</view>
      <view class="header-right"></view>
    </view>
    
    <view class="content">
      <view class="warning-section">
        <view class="warning-icon">
          <u-icon name="warning" size="40" color="#ff9900"></u-icon>
        </view>
        <view class="warning-title">注销账号须知</view>
        <view class="warning-desc">注销账号后，您将无法使用当前账号，相关数据将被清除且无法恢复</view>
      </view>
      
      <view class="notice-section">
        <view class="notice-title">注销须知</view>
        <view class="notice-list">
          <view class="notice-item">
            <view class="dot"></view>
            <text class="notice-text">账号注销后，您的个人信息将被删除</text>
          </view>
          <view class="notice-item">
            <view class="dot"></view>
            <text class="notice-text">账号注销后，您的交易记录将无法查询</text>
          </view>
          <view class="notice-item">
            <view class="dot"></view>
            <text class="notice-text">账号注销后，您的合同信息将被删除</text>
          </view>
          <view class="notice-item">
            <view class="dot"></view>
            <text class="notice-text">账号注销后，您将无法恢复账号及相关数据</text>
          </view>
          <view class="notice-item">
            <view class="dot"></view>
            <text class="notice-text">账号注销后，您的手机号将在180天后可重新注册</text>
          </view>
        </view>
      </view>
      
      <view class="verification-section">
        <view class="section-title">身份验证</view>
        <view class="form-section">
          <view class="form-item">
            <view class="form-label">姓名</view>
            <view class="form-input-group">
              <input class="form-input" v-model="formData.name" placeholder="请输入姓名" />
            </view>
          </view>
          
          <view class="form-item">
            <view class="form-label">身份证号</view>
            <view class="form-input-group">
              <input class="form-input" v-model="formData.idNumber" placeholder="请输入身份证号" maxlength="18" />
            </view>
          </view>
          
          <view class="form-item">
            <view class="form-label">交易密码</view>
            <view class="form-input-group">
              <input class="form-input" v-model="formData.password" placeholder="请输入6位交易密码" type="password" maxlength="6" inputmode="numeric" pattern="[0-9]*" />
            </view>
          </view>
        </view>
      </view>
      
      <view class="agreement-section">
        <checkbox v-model="formData.agreement" color="#1989fa" />
        <text class="agreement-text">我已阅读并同意<text class="link-text">《账号注销协议》</text></text>
      </view>
      
      <button class="deactivate-btn" @click="deactivateAccount">确认注销</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        name: '',
        idNumber: '',
        password: '',
        agreement: false
      }
    }
  },
  methods: {
    goBack() {
      uni.navigateBack();
    },
    checkIdNumber(idNumber) {
        // 正则表达式验证身份证格式
        const reg = /^(?:\d{15}|\d{17}[\dX])$/;
        if (!reg.test(idNumber)) {
            console.error('身份证号码格式不正确');
            return false;
        }

        // 如果是18位身份证，进行校验位验证
        if (idNumber.length === 18) {
            const weights = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2];
            const checkDigits = '10X98765432';
            let sum = 0;

            for (let i = 0; i < 17; i++) {
                sum += idNumber[i] * weights[i];
            }

            const checkDigit = checkDigits[sum % 11];
            if (checkDigit !== idNumber[17]) {
                console.error('身份证号码校验位不正确');
                return false;
            }
        }

        console.log('身份证号码有效');
        return true;
    },
    deactivateAccount() {
      // 表单验证
      if (!this.formData.name) {
        return uni.showToast({
          title: '请输入姓名',
          icon: 'none'
        });
      }
      
      if (!this.formData.idNumber || !this.checkIdNumber(this.formData.idNumber)) {
        return uni.showToast({
          title: '请输入正确的身份证号',
          icon: 'none'
        });
      }
      
      if (!this.formData.password || this.formData.password.length !== 6) {
        return uni.showToast({
          title: '请输入6位交易密码',
          icon: 'none'
        });
      }
      
      if (!this.formData.agreement) {
        return uni.showToast({
          title: '请阅读并同意账号注销协议',
          icon: 'none'
        });
      }
      
      // 确认注销
      uni.showModal({
        title: '确认注销',
        content: '账号注销后将无法恢复，确定要继续吗？',
        success: (res) => {
          if (res.confirm) {
            uni.showLoading({
              title: '处理中...'
            });
            
            // 模拟注销过程
            setTimeout(() => {
              uni.hideLoading();
              uni.showModal({
                title: '注销成功',
                content: '您的账号已成功注销，感谢您的使用',
                showCancel: false,
                success: () => {
                  // 注销后跳转到登录页
                  uni.reLaunch({
                    url: '/pages/login/index'
                  });
                }
              });
            }, 2000);
          }
        }
      });
    }
  }
}
</script>

<style lang="scss">
.account-container {
  min-height: 100vh;
  background-color: #f7f7f7;
}

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 90rpx;
  background-color: #fff;
  padding: 0 30rpx;
  border-bottom: 1px solid #f0f0f0;
}

.header-left {
  display: flex;
  align-items: center;
}

.header-left text {
  margin-left: 10rpx;
  font-size: 28rpx;
  color: #333;
}

.header-title {
  font-size: 32rpx;
  font-weight: 500;
  color: #333;
}

.header-right {
  width: 60rpx;
}

.content {
  padding: 30rpx;
}

.warning-section {
  background-color: #fff8e6;
  border-radius: 12rpx;
  padding: 30rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 30rpx;
}

.warning-icon {
  margin-bottom: 20rpx;
}

.warning-title {
  font-size: 32rpx;
  font-weight: 500;
  color: #ff9900;
  margin-bottom: 15rpx;
}

.warning-desc {
  font-size: 26rpx;
  color: #666;
  text-align: center;
  line-height: 1.5;
}

.notice-section {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
}

.notice-title {
  font-size: 30rpx;
  font-weight: 500;
  color: #333;
  margin-bottom: 20rpx;
  border-left: 4rpx solid #ff9900;
  padding-left: 20rpx;
}

.notice-list {
  margin-top: 15rpx;
}

.notice-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 15rpx;
}

.dot {
  width: 12rpx;
  height: 12rpx;
  border-radius: 50%;
  background-color: #ff9900;
  margin-top: 10rpx;
  margin-right: 15rpx;
}

.notice-text {
  font-size: 26rpx;
  color: #666;
  line-height: 1.5;
  flex: 1;
}

.verification-section {
  margin-bottom: 30rpx;
}

.section-title {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 15rpx;
  padding-left: 20rpx;
}

.form-section {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
}

.form-item {
  margin-bottom: 30rpx;
}

.form-item:last-child {
  margin-bottom: 0;
}

.form-label {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 15rpx;
}

.form-input-group {
  display: flex;
  align-items: center;
}

.form-input {
  flex: 1;
  height: 80rpx;
  background-color: #f9f9f9;
  border-radius: 8rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
  color: #333;
}

.verify-code-btn {
  width: 200rpx;
  height: 80rpx;
  background-color: #1989fa;
  color: #fff;
  font-size: 26rpx;
  border-radius: 8rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 20rpx;
}

.verify-code-btn.disabled {
  background-color: #ccc;
}

.agreement-section {
  display: flex;
  align-items: center;
  margin: 30rpx 0;
}

.agreement-text {
  font-size: 26rpx;
  color: #666;
  margin-left: 10rpx;
}

.link-text {
  color: #1989fa;
}

.deactivate-btn {
  height: 90rpx;
  background-color: #ff4d4f;
  color: #fff;
  font-size: 30rpx;
  font-weight: 500;
  border-radius: 45rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 30rpx;
}
</style> 